<!-- 首页 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>水果超市管理系统</title>
		<link rel="stylesheet" href="./layui/css/layui.css">
		<link rel="stylesheet" href="./xznstatic/css/common.css"/>
		<link rel="stylesheet" href="./xznstatic/css/style.css"/>
		<!-- 引入水果超市主题样式 -->
		<link rel="stylesheet" href="./css/fruit-market.css"/>
		<!-- 引入字体图标库 -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
	</head>
	<style type="text/css">
		html, body {
			height: 100%;
		}
		#iframe {
			width: 100%;
			margin-top: 50px;
			padding-top: 100px;
		}
		#header {
			height: auto;
			background: #fff;
			border-bottom: 0;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 1000;
		}

		#header .nav-top {
			display: flex;
			align-items: center;
			padding: 0 20px;
			font-size: 16px;
			box-sizing: border-box;
			height: 50px;
			background: linear-gradient(to right, var(--fruit-green), var(--fruit-light-green));
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			justify-content: center;
			position: relative;
		}

		#header .nav-top-img {
			width: 40px;
			height: 40px;
			padding: 0;
			margin: 0;
			border-radius: 50%;
			border-width: 0;
			border-style: solid;
			box-shadow: 0 0 6px rgba(0,0,0,.3);
		}

		#header .nav-top-title {
			line-height: 30px;
			font-size: 25px;
			color: rgba(255, 255, 255, 1);
			padding: 0 20px;
			margin: 0 20px;
			border-radius: 6px;
			border-width: 0px;
			border-style: solid;
			position: relative;
		}
		
		#header .nav-top-title:before {
			content: "🍎";
			position: absolute;
			left: -10px;
			top: 50%;
			transform: translateY(-50%);
			font-size: 20px;
		}
		
		#header .nav-top-title:after {
			content: "🍊";
			position: absolute;
			right: -10px;
			top: 50%;
			transform: translateY(-50%);
			font-size: 20px;
		}

		#header .nav-top-tel {
			line-height: 0px;
			font-size: 20px;
			color: rgba(255, 255, 255, 1);
			padding: 0px 20px;
			margin: 0px 20px;
			border-radius: 20px;
			border-width: 0px;
			border-style: solid;
		}

		#header .navs {
			display: flex;
			padding: 0 20px;
			align-items: center;
			box-sizing: border-box;
			height: 100px;
			background-color: rgba(255, 255, 255, 1);
			box-shadow: 0 1px 6px rgba(0,0,0,0.1);
			justify-content: center;
		}
		#header .navs .title {
			width: auto;
			line-height: 40px;
			font-size: 25px;
			color: var(--fruit-green);
			padding: 0;
			margin: 0 0 0 30px;
			border-radius: 6px;
			border-width: 0;
			border-style: solid;
		}
		#header .navs li {
			display: inline-block;
			width: auto;
			line-height: 35px;
			padding: 0 20px;
			margin: 0 5px;
			color: var(--fruit-dark-text);
			font-size: 18px;
			border-radius: 10px;
			border-width: 0px;
			border-style: solid;
			background-color: rgba(255, 255, 255, 1);
			transition: all 0.3s;
			text-align: center;
		}
		#header .navs li a{
			color: inherit;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		#header .navs li a i {
			margin-right: 5px;
			font-size: 16px;
		}
		#header .navs li.current a{
			color: inherit;
		}
		#header .navs li a:hover{
			color: inherit;
		}
		#header .navs li.current {
			color: rgba(255, 255, 255, 1);
			font-size: 18px;
			border-radius: 10px;
			border-width: 0;
			background-color: var(--fruit-green);
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		}
		#header .navs li:hover {
			color: rgba(255, 255, 255, 1);
			font-size: 18px;
			border-radius: 10px;
			border-width: 0;
			background-color: var(--fruit-light-green);
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			transform: translateY(-3px);
		}
	</style>
	<body>
		<!-- 页面加载动画 -->
		<div class="fruit-loader" id="pageLoader">
			<div class="fruit-loader-content">
				<div class="fruit-loader-spinner"></div>
				<div class="fruit-loader-text">水果超市管理系统加载中...</div>
			</div>
		</div>
		
		<!-- start 顶部导航栏 -->
		<div id="header">
			<div class="nav-top">
<!--				<img class="nav-top-img" src="./img/fruit-logo.png">-->
				<div class="nav-top-title">水果超市管理系统</div>
				<div class="nav-top-tel">
					<i class="fas fa-phone-alt"></i> 400-123-4567
				</div>
			</div>
		    <div class="navs">
				<div class="title" v-if="false" v-text="projectName"></div>
				<div class="list">
					<ul>
						<li class='current'><a href="javascript:navPage('./pages/home/home.html')" class="menumain"><i class="fas fa-home"></i>首页</a></li>
						<li v-for="(item,index) in indexNav" v-bind:key="index"><a :href="'javascript:navPage(\''+item.url+'\')'" class="menumain" style="cursor: pointer;"><i class="fas" :class="iconArr[index]"></i>{{item.name}}</a></li>
						<li><a href="javascript:centerPage();" class="menumain"><i class="fas fa-user"></i>个人中心</a></li>
						<li><a :href="adminurl" target="_blank" class="menumain" style="cursor: pointer;"><i class="fas fa-cog"></i>后台管理</a></li>
						<li v-if="cartFlag"><a href="javascript:navPage('./pages/shop-cart/list.html')" class="menumain"><i class="fas fa-shopping-cart"></i>购物车</a></li>
						<li v-if="chatFlag"><a href="javascript:chatTap()" class="menumain"><i class="fas fa-comments"></i>客服</a></li>
					</ul>
				</div>
		    </div>
		</div>
		<!-- end 顶部导航栏 -->

		<iframe src="./pages/home/home.html" id="iframe" frameborder="0" scrolling="no" width="100%" onload="changeFrameHeight"></iframe>

		<!-- 水果主题页脚 -->
		<div class="fruit-footer">
			<div class="fruit-footer-container">
				<div class="fruit-footer-section">
					<h3>关于我们</h3>
					<p>水果超市管理系统致力于为顾客提供新鲜、优质的水果，以及便捷的购物体验。</p>
					<div class="social-icons">
						<a href="#" class="social-icon"><i class="fab fa-weixin"></i></a>
						<a href="#" class="social-icon"><i class="fab fa-weibo"></i></a>
						<a href="#" class="social-icon"><i class="fab fa-qq"></i></a>
					</div>
				</div>
				<div class="fruit-footer-section">
					<h3>快速链接</h3>
					<ul>
						<li><a href="javascript:navPage('./pages/home/home.html')">首页</a></li>
						<li><a href="javascript:navPage('./pages/shuiguo/list.html')">水果商城</a></li>
						<li><a href="javascript:navPage('./pages/huiyuanka/list.html')">会员卡</a></li>
						<li><a href="javascript:navPage('./pages/news/list.html')">水果资讯</a></li>
					</ul>
				</div>
				<div class="fruit-footer-section">
					<h3>联系我们</h3>
					<p><i class="fas fa-map-marker-alt"></i> 地址：中国广东省广州市天河区</p>
					<p><i class="fas fa-phone"></i> 电话：400-123-4567</p>
					<p><i class="fas fa-envelope"></i> 邮箱：contact@fruitmarket.com</p>
				</div>
			</div>
			<div class="fruit-footer-bottom">
				<p>© 2025 水果超市管理系统 版权所有</p>
			</div>
		</div>

		<script src="./xznstatic/js/jquery-1.11.3.min.js"></script>
		<script src="./layui/layui.js"></script>
		<script src="./js/vue.js"></script>
		<script src="./js/config.js"></script>

		<script>
			// 页面加载完成后隐藏加载动画
			window.onload = function() {
				setTimeout(function() {
					document.getElementById('pageLoader').classList.add('hidden');
				}, 500);
			};
		
			var vue1 = new Vue({el: '#tabbar'})

			var vue = new Vue({
				el: '#header',
				data: {
					iconArr: ['fa-apple-alt','fa-lemon','fa-carrot','fa-seedling','fa-leaf','fa-shopping-basket','fa-store','fa-truck','fa-tags','fa-percent','fa-gift','fa-star','fa-heart'],
					indexNav: indexNav,
					cartFlag: cartFlag,
					adminurl: adminurl,
					chatFlag: chatFlag,
					projectName: projectName || "水果超市管理系统",
				},
				mounted: function() {
					this.bindClickOnLi();
				},
				created() {
					this.iconArr.sort(()=>{
					  return (0.5-Math.random())
					})
				},
				methods: {
					jump(url) {
						jump(url)
					},
					bindClickOnLi() {
						let list = document.getElementsByTagName("li");
						for(var i = 0;i<list.length;i++){
							list[i].onclick = function(){
								$(this).addClass("current").siblings().removeClass("current");
							}
						}
					}
				}
			});

			layui.use(['element','layer'], function() {
				var element = layui.element;
				var layer = layui.layer;
			});

			function chatTap(){
				var userTable = localStorage.getItem('userTable');
				if (userTable) {
					layui.layer.open({
						type: 2,
						title: '客服',
						area: ['600px', '600px'],
						content: './pages/chat/chat.html'
					});
				} else {
					window.location.href = './pages/login/login.html'
				}
			}

			// 导航栏跳转
			function navPage(url) {
				localStorage.setItem('iframeUrl', url);
				document.getElementById('iframe').src = url;
			}

			// 跳转到个人中心也
			function centerPage() {
				var userTable = localStorage.getItem('userTable');
				if (userTable) {
					localStorage.setItem('iframeUrl', './pages/' + userTable + '/center.html');
					document.getElementById('iframe').src = './pages/' + userTable + '/center.html';
				} else {
					window.location.href = './pages/login/login.html'
				}
			}

			var iframeUrl = localStorage.getItem('iframeUrl');
			document.getElementById('iframe').src = iframeUrl  || './pages/home/home.html';

			setInterval(function(){
				changeFrameHeight();
			},200)

			function changeFrameHeight() {
				var iframe = document.getElementById('iframe');
				if (iframe) {
					var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
					if (iframeWin.document.body) {
						iframe.height = iframeWin.document.body.scrollHeight;
					}
				}
			};

			// reasize 事件 窗口大小变化后执行的方法
			window.onresize = function() {
				changeFrameHeight();
			}
		</script>
	</body>
</html>
